{include file="index/header" /}
<div class="layui-card">
    <div class="layui-card-body">
        <div style="float: left">
            <div class="layui-input-inline">
                <input type="text" name="search" required lay-verify="required" placeholder="请输入筛选内容"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="pear-btn pear-btn-primary" lay-event="search"><i class="layui-icon layui-icon-search"></i> 筛选</button>
            </div>
        </div>
        <div style="float: right">
            <button plain class="pear-btn pear-btn-warming" t-event="import"><i class="layui-icon layui-icon-util"></i> 导入</button>
            <button plain class="pear-btn pear-btn-primary" t-event="add"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
            <button plain class="pear-btn pear-btn-danger" t-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</button>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="tools_list" lay-filter="tools_list"></table>
    </div>
</div>
<script type="text/html" id="toolbar">
    {volist name=":getToolsType()" id="vo"}
    <button plain class="pear-btn pear-btn-primary pear-btn-xs" data-code="{$vo.code}">{$vo.name}</button>
    {/volist}
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['jquery','common', 'util', 'table', 'form', 'upload','drawer'], function () {
        var $ = layui.jquery,
            T = layui.table,
            F = layui.form,
            U = layui.upload,
            D = layui.drawer,
            C = layui.common,
            E = layui.util;

        T.render({
            elem: '#tools_list'
            , height: 'full-140'
            , url: "{:url('getList')}" //数据接口
            , page: true //开启分页
            , size: 'sm'
            , toolbar: '#toolbar'
            ,defaultToolbar: false
            ,cols: [[ //表头
                {field: 'id', type:'checkbox', fixed: 'left'}
                , {field: 'title', title: '名称', width: 150}
                , {field: 'status', title: '状态', align: 'center', width: 80,templet:function (d){
                    return d.status === 1?'<span class="layui-badge layui-bg-blue">启用</span>':'<span class="layui-badge">停用</span>';
                    }}
                , {field: 'type_span', title: '类别', align: 'center', width: 80}
                , {field: 'keyword', title: '关键字', minWidth: 200}
                , {field: 'sub_title', title: '描述', minWidth: 200}
                , {field: 'url', title: '地址', width: 100, sort: true}
                , {field: 'id', title: '操作', align: 'center', width: 150, fixed: 'right', toolbar:'#bar'}
            ]]
        });

        E.event('t-event',{
            import: function (){

            },add: function (){
                edit();
            },del: function (){

            }
        });

        T.on('tool(tools_list)',function (obj){
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                edit(data);
            }
        });

        function edit(r_data){
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: [C.isMobile()?'100%':'600px','100%'],
                offset: 'r',
                anim: 2,
                content: "{$page.R}/edit/id/"+(r_data&&r_data.id||0),
                success: function (l,i){

                },end: function (){
                    T.reload('tools_list');
                }
            });
        }
    });
</script>
{include file="index/footer" /}